graphix logo Graphix Design

(Noch in Entwicklung) Digitale Bilder gibt es in vielen Formen. Die zwei Grundprinzipien sind **Pixelgrafiken (Raster)** und **Vektorgrafiken**. Entdecke hier die gängigsten Formate im Vergleich und wirf einen Blick in meine persönliche Foto-Galerie!

Pixelwelten: Das JPG Format

JPG (oder JPEG) ist das Arbeitspferd für Fotos im Web. Es verwendet eine verlustbehaftete Kompression, ideal für komplexe Bilder mit vielen Farben, um die Dateigröße gering zu halten.

JPG Beispiel: Landschaftsfoto JPG Beispiel: Porträt JPG Beispiel: Detailreiche Grafik JPG Beispiel: Produktfoto JPG Beispiel: Farbverlauf JPG Beispiel: Tierfoto

JPG: Vor- und Nachteile

Vorteile

  • Exzellente Kompression für Fotos
  • Sehr kleine Dateigrößen erreichbar
  • Universelle Unterstützung
  • Gut für Farbverläufe

Nachteile

  • Verlustbehaftet
  • Nicht skalierbar (Pixelbildung)
  • Ungeeignet für Linien/Text
  • Keine Transparenz (meist)

Typische Anwendung:

Fotografien (Web & Druckvorstufe mit geringer Kompression), detailreiche Rastergrafiken, wenn Dateigröße entscheidend ist.

Transparenz-Meister: Das PNG Format

PNG (Portable Network Graphics) ist ein Rasterformat, das verlustfreie Kompression und Transparenz unterstützt.

PNG Beispiel: Logo mit Transparenz PNG Beispiel: Icon Set PNG Beispiel: Webgrafik mit Text PNG Beispiel: Screenshot PNG Beispiel: Flache Illustration PNG Beispiel: Logo auf farbigem Grund

PNG: Vor- und Nachteile

Vorteile

  • Verlustfreie Kompression
  • Alpha-Transparenz
  • Gut für scharfe Kanten
  • Breite Unterstützung

Nachteile

  • Größere Dateien (Fotos)
  • Nicht für Druck (CMYK)
  • Ineffizient bei Komplexität

Typische Anwendung:

Logos und Icons im Web, Grafiken mit Transparenzbedarf, Screenshots, Web-Illustrationen mit flachen Farben oder scharfen Linien.

Bewegte Bilder: Das GIF Format

GIF (Graphics Interchange Format) ist bekannt für einfache Animationen und unterstützt Transparenz (1-Bit).

GIF Beispiel: Einfache Animation lang GIF Beispiel: Animiertes kurz GIF Beispiel: Design-Animation GIF Beispiel: Animierte Kira GIF Beispiel: Ocean Effekt GIF Beispiel: Kurzer Video-Clip als GIF

GIF: Vor- und Nachteile

Vorteile

  • Animationen
  • Verlustfrei (Palette)
  • Einfache Transparenz
  • Sehr breite Unterstützung

Nachteile

  • Max 256 Farben
  • Harte Transparenz
  • Große Dateien (Animation)
  • Ineffizient vs. Video

Typische Anwendung:

Kurze, einfache Web-Animationen, animierte Icons, Memes, wenn breite Kompatibilität für Animationen benötigt wird.

Vektorzauber: Das SVG Format

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorformat. Es beschreibt Grafiken mathematisch.

SVG Beispiel: Skalierbares Logo SVG Beispiel: Icon Set SVG Beispiel: Vektor-Illustration SVG Beispiel: Diagramm SVG Beispiel: Text als Vektor SVG Beispiel: Komplexe Form

SVG: Vor- und Nachteile

Vorteile

  • Verlustfrei skalierbar
  • Kleine Dateien (oft)
  • Ideal für Logos/Icons
  • Animierbar/Interaktiv
  • Textbasiert (SEO)

Nachteile

  • Nicht für Fotos
  • Komplex bei Details
  • Leichte Render-Varianz

Typische Anwendung:

Logos, Icons, Web-Illustrationen, Infografiken, interaktive Karten/Diagramme, UI-Elemente, wenn Skalierbarkeit Priorität hat.